<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/css/common.css" media="all">
  <link rel="stylesheet" href="../viewstyle/css/searchform.css">
  <script src="/js/layui/layui.all.js"></script>
  <script src="/admin/js/token.js"></script>
</head>
<body>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
      <div class="layui-form-item">

        <div class="layui-inline">
          <div class="layui-form">
            <div class="layui-form-item">
              <div class="layui-input-inline">
                <input type="text" class="layui-input" id="begin" placeholder="交易开始区间">
              </div>
              <div class="layui-form-mid">
                -
              </div>
              <div class="layui-input-inline">
                <input type="text" class="layui-input" id="end" placeholder="交易结束区间">
              </div>
            </div>
          </div>
        </div>

        <div class="layui-inline">
          <div class="layui-input-inline">
            <input type="text" id="stationAdmin" placeholder="充值管理员名称" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-inline">
          <div class="layui-input-inline">
            <input type="text" id="stationname" placeholder="站点名称" autocomplete="off" class="layui-input">
          </div>
        </div>


        <div class="layui-inline">
          <button id="btnsearch"  class="layui-btn ">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
          </button>
        </div>

      </div>
    </div>


    <div class="layui-card-body">
      <table id="stationRecharge" class="layui-hide" lay-filter="t"></table>
    </div>

  </div>
</div>

</body>
<script>
    var $ = layui.$;
    var laydate = layui.laydate;
    var form = layui.form;
    var table = layui.table;
    // 执行一个laydate实例
    laydate.render({
      elem: '#begin', //指定元素
      type: 'datetime'
    });
    laydate.render({
      elem: '#end', //指定元素
      type: 'datetime'
    });
    table.render({
      elem: "#stationRecharge",
      url: "/admin/station-recharge/AllStationRecharge",
      id: "t",
      cols: [[{
        title: "订单编号",
        field: "station_recharge_id",
        width: "15%",
        align: "center"
      }
        , {
          title: "交易时间",
          field: "station_recharge_time",
          width: "25%",
          align: "center"
        }
        , {
          title: "充值数量",
          field: "station_recharge_sum",
          width: "20%",
          align: "center"
        }
        , {
          title: "充值管理员",
          field: "admin_name",
          width: "20%",
          align: "center"
        }
        , {
          title: "充值站点",
          field: "station_name",
          width: "20%",
          align: "center"
        }
      ]],
      page: true,
    })
    //搜索的监听时间
    $('#btnsearch').click(function () {
      table.reload('t', {
        where: {
          CreateTime: $("#begin").val(),
          EndTime: $("#end").val(),
          stationRechargeAdminName: $("#stationAdmin").val(),
          stationRechargeStationName: $("#stationname").val()
        },
        page: {
          curr: 1
        }
      })
    });

    //键盘回车监听
    $(window).keypress(function (event) {
      if(event.which === 13){
        $('#btnsearch').click();
      }
    })
</script>
</html>
